<template>
  <div class="radar">
    <div style="width: 500px;height: 500px;margin: 0 auto;" id="radarDiv"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  // import {getData} from '@/api/epidemic.js'

  export default {
    name: "Radar",
    data() {
      return {
        dataBJ: [
          [55,9,56,0.46,18],
          [25,11,21,0.65,34],
          [56,7,63,0.3,14],
          [33,7,29,0.33,16],
          [42,24,44,0.76,40],
        ],
        dataGZ: [
          [26, 37, 27, 1.163, 27],
          [85, 62, 71, 1.195, 60],
          [78, 38, 74, 1.363, 37]
        ],
        dataSH: [
          [87, 63, 101, 0.9, 56],
          [65, 45, 51, 0.74, 39],
          [39, 24, 38, 0.61, 47],
          [39, 24, 39, 0.59, 50],
          [93, 68, 96, 1.05, 79]
        ]
      }
    },
    mounted() {
      this.drawRadar()
    },
    methods: {
      drawRadar() {
        let radarDiv = echarts.init(document.getElementById('radarDiv'))
       /* let dataBJ = [
         /!* [150, 102, 148, 108, 68],
          [120, 100, 120, 20, 50]*!/
        ]
        getData("北京").then(res => {
          let allData = res.data
          //获取新的值组成数组
          let newDataArr = []
          allData.forEach(item => {
            newDataArr.push({
              confirm: item.confirm,
              confirm_add: item.confirm_add,
              dead: item.dead,
              heal: item.heal,
              newHeal: item.newHeal
            })
          })
          let newData = newDataArr[0]
          let arr1 = []
          for (const key in newData) {
            arr1.push(parseInt(newData[key]))
          }
          dataBJ.push(arr1)
          console.log(dataBJ);
        }).catch(err => {
          console.log(err);
        })*/
        var lineStyle = {
          normal: {
            width: 1,
            opacity: 0.5
          }
        };
        let option = {
          backgroundColor: '#161627',
          title: {
            text: 'AQI - 雷达图',
            left: 'left',
            textStyle: {
              color: '#eee'
            }
          },
          legend: {
            top: 5,
            data: ['北京', '上海', '四川'],
            itemGap: 20,
            textStyle: {
              color: '#e73838',
              fontSize: 14
            },
            selectedMode: 'single'
          },
          visualMap: {
            show: true,
            min: 0,
            max: 20,
            dimension: 6,
            inRange: {
              colorLightness: [0.5, 0.8]
            }
          },
          radar: {
            indicator: [
              {name: 'AQI', max: 100},
              {name: 'PM2.5', max: 100},
              {name: 'PM10', max: 100},
              {name: 'CO', max: 5},
              {name: 'NO2', max: 100},
            ],
            shape: 'circle',
            splitNumber: 5,
            name: {
              textStyle: {
                color: 'rgb(238, 197, 102)'
              }
            },
            splitLine: {
              lineStyle: {
               /* color: [
                  'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                  'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                  'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                ].reverse()*/
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
              }
            }
          },
          series: [
            {
              name: '北京',
              type: 'radar',
              lineStyle: lineStyle,
              data: this.dataBJ,
              symbol: 'none',
              itemStyle: {
                color: '#F9713C'
              },
              areaStyle: {
                opacity: 0.1
              }
            },
            {
              name: '上海',
              type: 'radar',
              lineStyle: lineStyle,
              data: this.dataSH,
              symbol: 'none',
              itemStyle: {
                color: '#B3E4A1'
              },
              areaStyle: {
                opacity: 0.05
              }
            },
            {
              name: '四川',
              type: 'radar',
              lineStyle: lineStyle,
              data: this.dataGZ,
              symbol: 'none',
              itemStyle: {
                color: 'rgb(238, 197, 102)'
              },
              areaStyle: {
                opacity: 0.05
              }
            }
          ]
        };
        radarDiv.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>